<template>
    <div class="container">
        <el-breadcrumb separator-icon="RightOutlined" :info="execItemList">
            <el-breadcrumb-item v-for="item in itemList" :key="item.index" :to="{ path: item.routeTo }" :style="execItemStyle">
                {{ item.title }}
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
import {doThirdServiceValue} from "@/request/lowcode/thirdService";

export default {
    name: "BreadCrumbComponent",
    props: ['propJson', 'commonParam'],
    data() {
        return {
            itemList: []
        }
    },
    methods: {
        execItemThen(resValue) {
            if (!resValue && this.propJson.editFlag) {
                this.itemList = [
                    {
                        title: "无内容",
                        routeTo: ""
                    }
                ]
                return;
            }
            if (Array.isArray(resValue)) {
                this.itemList = resValue
            } else if (typeof resValue === "string") {
                this.itemList = [
                    {
                        title: resValue,
                        routeTo: resValue
                    }
                ]
            }
        },
        execItemCatch(resValue) {

        }
    },
    computed: {
        execItemStyle() {
            let resStyle = "";
            if (this.propJson.fontSize !== "") {
                resStyle += "font-size: " + this.propJson.fontSize + ";";
            }
            return resStyle;
        },
        async execItemList() {
            if (this.propJson.editFlag) {
                return;
            }
            await doThirdServiceValue(this.propJson.breadCrumbValue, this.commonParam, this.execItemThen, this.execItemCatch, null)
        }
    }
}
</script>

<style scoped lang="less">

</style>